{% extends "userlayout.html" %}

{% block content %}
<style type="text/css" media="screen">
    #photoupload {
        
    }
    #photoupload h4 {
        text-align:center;
    }
    #photo {
        float:left;
        width:75px;
    }
    #uploadForm p {
        text-align:center;
    }
    #uploadForm #submit {
        border:1px solid #ccc;
        border-right:1px solid #999;
        border-bottom:1px solid #999;
        font-size:18px;
    }
    .note {
        font-size:12px;
        text-align:center;
    }
</style>
<div class="Block" style="overflow:hidden" id="photoupload">
    <div id="photo">
    	<img src="/profile/{{usr}}">
    </div><!-- photo -->

    <div id="uploadForm">
        <h4>Add/Update your Picture that is seen with your Ripples!</h4>
        <form method="post" action="" enctype="multipart/form-data" id="uploadForm">
            <p><input type="file" name="userpic" value="" id="userpic"></p>
			{% if error %}<p style="text-align:center;font-weight:bold;color:red">{{error}}</p>{% endif %}
            <p><input type="submit" name="submit" value="Get my photo up!" id="submit">
        </form>
        <p class="note">note: photo will be resized to 2 sizes: 1. Profile (75x75) and Thumbnail (30x30)</p>
    </div><!-- uploadForm -->
</div>
{% endblock %}